<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* padding: 0; */
            margin: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
        }

        h2 {
            font-family: Helvetica;
            font-size: 36px;
            margin-top: 40px;
            color: #333;
            opacity: 0;
        }

        input[type="checkbox"]:checked~h2 {
            animation: .6s title ease-in-out;
            animation-delay: 1.2s;
            animation-fill-mode: forwards;
        }

        .circle {
            stroke-dasharray: 1194;
            stroke-dashoffset: 1194;
        }

        input[type="checkbox"]:checked+svg .circle {
            animation: circle 1s ease-in-out;
            animation-fill-mode: forwards;
        }

        .tick {
            stroke-dasharray: 350;
            stroke-dashoffset: 350;
        }

        input[type="checkbox"]:checked+svg .tick {
            animation: tick .8s ease-out;
            animation-fill-mode: forwards;
            animation-delay: .95s;
        }

        @keyframes circle {
            from {
                stroke-dashoffset: 1194;
            }

            to {
                stroke-dashoffset: 2388;
            }
        }

        @keyframes tick {
            from {
                stroke-dashoffset: 350;
            }

            to {
                stroke-dashoffset: 0;
            }
        }

        @keyframes title {
            form {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <input type="checkbox" style="margin-bottom: 10px">
    <svg width="400" height="400">
        <circle fill="none" transform="rotate(-90 200 200)" stroke="#68e534" stroke-linecap="round" stroke-width="20"
            cx="200" cy="200" r="190" class="circle" />
        <polyline fill="none" stroke="#68e534" stroke-width="24" points="88,214 173,284 304,138" stroke-linecap="round"
            stroke-linejoin="round" class="tick" />
    </svg>
    <h2 class="title">支付成功</h2>
</body>

</html>